import styled from 'styled-components'
import level from '@a/images/lxl/tuoyuan.png'

const LevelWrap=styled.div`
  background-image:url(${level});
  background-repeat: no-repeat;
  background-size:100% 2.5rem;
  width:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:.1rem .1rem;
  img{
    width:1.2rem;
  }
  .flexsheng{
    width:100%;
    height:.8rem;
    border-radius:.4rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:.12rem;
    letter-spacing:.01rem;
    background:#3399FF;
  }
  .shengjikuai{
    padding:0 .03rem;
    border:.01rem solid #ffaa33;
    border-radius:28%;
    margin-right:.05rem;
  }
  .youxiao{
    color:#fff;
    font-size:.14rem;
    margin-top:.08rem;
  }
  .shengji{
    color:#ffaa33;
    font-size:.12rem;
    margin-top:.12rem;
  }
  p{
    color:#ccc;
    letter-spacing:.01rem;
    font-size:.12rem;
    margin-top:.2rem;
  }
  .top{
    height:80%;
  }
`
const LevelBonus=styled.div`
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  .title{
    width:100%;
    text-align:center;
    font-size:.2rem;
    margin-top:.2rem;
    font-weight:bold;
  }
  ul{
    display:flex;
    flex-wrap:wrap;
  }
  li{
    margin-top:.3rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:33%;
    img{
      width:.4rem;
    }
    span{
      font-size:.14rem;
    }
    p{
      font-size:.12rem;
    }
  }
  .footer{
    margin-top:.4rem;
    background:#FF9933;
    height:.4rem;
    width:3rem;
    border:.01rem solid #FF9933;
    border-radius:.5rem;
    padding:.08rem 1rem;
  }
`

export {
  LevelWrap,
  LevelBonus
}